import * as React from 'react'

interface CompProps {
    children: React.ReactNode // 👈️ type children
}

export function Component1(props: CompProps) {
    return <div>{props.children}</div>
}

export function jsx2() {
    const props = { a: 1,
        b: 2 }
    return < a foo= 'bar' bar={`foo` } >
        <div {...props }
            a={1}
            b="2">Inline Text</div>
        <Component1>
            Block Text
        </Component1>
        <div>
            Mixed
            <div>Foo</div>
            Text<b > Bar</b>
        </div>
        <p>
            foo<i>bar</i><b>baz</b>
        </p>
    </ a >
}
